<template>
  <!-- <div> -->
  <div class="PieView2" v-loading="loading">
    <div id="Pie2"></div>
  </div>
  <!-- </div> -->
</template>

<script setup lang="ts">
import { getWord } from "@/request/comment";
const echart = inject("echart");
let myChart = null;
const loading = ref(true);
const props = defineProps({
  city_list: {
    type: String,
    default: ""
  }
});

onMounted(() => {
  // initEcharts();
  // getData();
  // console.log(props.city_id_list);
});
onUnmounted(() => {
  if (myChart.isDisposed) {
    myChart.clear();
    myChart.dispose();
    myChart = null;
  }
});

const getData = async item => {
  const result = [];
  await getWord({
    list_id: item
  }).then(({ data }) => {
    console.log(data[0]);
    let result1 = {};
    result1.name = "差评";
    result1.value = data[0].bad_word[0][0];
    result.push(result1);
    let result2 = {};
    result2.name = "好评";
    result2.value = data[0].good_word[0][0];
    result.push(result2);
    renderEcharts(result);
  });
};
const initEcharts = () => {
  myChart = echart.init(document.getElementById("Pie2"));
};
const renderEcharts = (result: any) => {
  loading.value = false;
  console.log(result);
  
  myChart.setOption({
    backgroundColor: "#040042",
    title: {
      text: "点评次数占比",
      textStyle: {
        align: "center",
        color: "#FA0326",
        fontSize: 20
      },
      top: "5%",
      left: "center"
    },
    tooltip: {
      formatter: "{a} <br/>{c} {b}次"
    },
    series: [
      {
        name: "差评",
        type: "gauge",
        // radius: ["60%", "68%"],
        color: ["#f00"],
        min: 0,
        max: result[0].value+100,
        splitNumber: 8,
        radius: "60%",
        center: ["25%", "50%"],
        axisLine: {
          // 坐标轴线
          lineStyle: {
            // 属性lineStyle控制线条样式
            width: 10,
            color: [
              [0.4, "#203add"],
              [1, "#0d1758"]
            ]
          },
          backgroundColor: "none"
        },
        tooltip: {
          formatter: function() {
            if (result[0].value) {
              return "差评:" + result[0].value;
            }
          }
        },
        axisTick: {
          // 坐标轴小标记
          length: 12, // 属性length控制线长
          lineStyle: {
            // 属性lineStyle控制线条样式
            color: "auto"
          }
        },
        splitLine: {
          // 分隔线
          length: 5, // 属性length控制线长
          lineStyle: {
            // 属性lineStyle（详见lineStyle）控制线条样式
            color: "rgba(255,255,255,0.7)"
          }
        },
        axisLabel: {
          borderRadius: 1,
          color: "rgba(255,255,255,0.7)",
          padding: 1
        },
        title: {
          // 其余属性默认使用全局文本样式，详见TEXTSTYLE
          // fontWeight: 'bolder',
          fontSize: 13,
          fontColor: "#FFF",
          color: "#FFF",
          paddingTop: 10,
          offsetCenter: [0, "90%"]
          // fontStyle: 'italic'
        },
        itemStyle: {
          color: "#1092ff"
        },
        detail: {
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          // borderWidth: 1,
          textBorderColor: "#000",
          textBorderWidth: 1,
          textShadowBlur: 1,
          textShadowColor: "#fff",
          textShadowOffsetX: 0,
          textShadowOffsetY: 0,
          paddingTop: 10,
          fontFamily: "digital",
          fontSize: 20,
          width: 30,
          color: "#fff",
          rich: {},
          offsetCenter: [0, "65%"],
          formatter: function(value) {
            console.info(value);
            return '差评'+value + "次";
          }
        },
        data: [result[0]]
      },
      {
        name: "好评",
        type: "gauge",
        color: ["#f00"],
        min: 0,
        max:result[0].value+100,
        splitNumber: 8,
        radius: "60%",
        center: ["75%", "50%"],
        axisLine: {
          // 坐标轴线
          lineStyle: {
            // 属性lineStyle控制线条样式
            width: 10,
            color: [
              [0.4, "#203add"],
              [1, "#0d1758"]
            ]
          },
          backgroundColor: "none"
        },
        axisTick: {
          // 坐标轴小标记
          length: 12, // 属性length控制线长
          lineStyle: {
            // 属性lineStyle控制线条样式
            color: "auto"
          }
        },
        tooltip: {
          formatter: function() {
            if (result[1].value) {
              return "好评:" + result[1].value;
            }
          }
        },
        splitLine: {
          // 分隔线
          length: 5, // 属性length控制线长
          lineStyle: {
            // 属性lineStyle（详见lineStyle）控制线条样式
            color: "rgba(255,255,255,0.7)"
          }
        },
        axisLabel: {
          borderRadius: 1,
          color: "rgba(255,255,255,0.7)",
          padding: 1
        },
        title: {
          fontSize: 13,
          fontColor: "#FFF",
          color: "#FFF",
          paddingTop: 10,
          offsetCenter: [0, "90%"]
        },
        itemStyle: {
          color: "#1092ff"
        },
        detail: {
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          textBorderColor: "#000",
          textBorderWidth: 1,
          textShadowBlur: 1,
          textShadowColor: "#fff",
          textShadowOffsetX: 0,
          textShadowOffsetY: 0,
          paddingTop: 10,
          fontFamily: "digital",
          fontSize: 20,
          width: 30,
          color: "#fff",
          rich: {},
          offsetCenter: [0, "65%"],
          formatter: function(value) {
            return '好评'+value + "次";
          }
        },
        data: [result[1]]
      }
    ]
  });
};

watch(
  () => props.city_list,
  (newValue, oldValue) => {
    if (newValue) {
      console.log(newValue);

      initEcharts();
      getData(newValue);
    }
  }
);
window.addEventListener("resize", () => {
  //监听浏览器大小去改变图表尺寸
  myChart.resize();
});
</script>

<style scoped>
.PieView2 {
  height: 100%;
  width: 100%;
  /* height: 500px; */
  /* background-color: aliceblue; */
}

#Pie2 {
  height: 100%;
  width: 100%;
  /* background-color: aliceblue; */
}
</style>